<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<div class="header">宇宙无敌暴龙战士超市</div>
		<div class="menu">
			<div class="menu_li">
				<a href="">我的淘宝</a>
			</div>
			<div class="menu_li">
				<a href="cart2.html" style="color: red;">购物车(转场)</a>
			</div>
			<div class="menu_li">
				<a href="">收藏夹</a>
			</div>
			<div class="menu_li">
				<a href="">商品分类</a>
			</div>
		</div>
		<div class="all_logo_2_2">
			<div id="wrap">
				<div style="overflow: hidden;">
					<i class="fas fa-search"></i>
					<input type="text" id="text" value="瓜子">
					<input type="submit" class="submit" value="搜索" index="1">
				</div>
			</div>
		</div>
		<div class="main2">
			<div class="picture">
				<img src="../src/png/gz.jpg" alt="" srcset="">
				<p>大山的瓜子1.5kg</p>
				<p style="color: red;">$30</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销700+</p>
			</div>
			<div class="picture">
				<img src="../src/png/hs.jpg" alt="" srcset="">
				<p>大山的花生1.5kg</p>
				<p style="color: red;">$25</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销800+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的西瓜子1.5kg</p>
				<p style="color: red;">$35</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销1000+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的金西瓜子1.5kg</p>
				<p style="color: red;">$168</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销100+</p>
			</div>
			<div class="picture">
				<img src="../src/png/gz.jpg" alt="" srcset="">
				<p>大山的瓜子1.5kg</p>
				<p style="color: red;">$30</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销700+</p>
			</div>
			<div class="picture">
				<img src="../src/png/hs.jpg" alt="" srcset="">
				<p>大山的花生1.5kg</p>
				<p style="color: red;">$25</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销800+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的西瓜子1.5kg</p>
				<p style="color: red;">$35</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销1000+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的金西瓜子1.5kg</p>
				<p style="color: red;">$168</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销100+</p>
			</div>
			<div class="picture">
				<img src="../src/png/gz.jpg" alt="" srcset="">
				<p>大山的瓜子1.5kg</p>
				<p style="color: red;">$30</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销700+</p>
			</div>
			<div class="picture">
				<img src="../src/png/hs.jpg" alt="" srcset="">
				<p>大山的花生1.5kg</p>
				<p style="color: red;">$25</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销800+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的西瓜子1.5kg</p>
				<p style="color: red;">$35</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销1000+</p>
			</div>
			<div class="picture">
				<img src="../src/png/xgz.jpg" alt="" srcset="">
				<p>大山的金西瓜子1.5kg</p>
				<p style="color: red;">$168</p>
				<p style="float: right;font-size: 15px;margin-top: 0px;color: lightgray;">月销100+</p>
			</div>
		</div>
		
	</body>
	<style>
		.header {
			/* position: fixed;
			top: 0;
			 */
			height: 60px;
			line-height: 60px;
			color: white;
			background-color: rgb(255, 80, 0);
			text-align: center;
		}

		.menu_li {
			background: lightgrey;
			float: left;
			padding-left: 2%;
			height: 20px;
			width: 23%;
			text-align: center;
		}

		.all_logo_2_2 {
			float: left;
			margin-left: 100px;
			margin-top: 19px;
			height: 26px;
			width: 700px;
			background-color: white;
			margin-left: 400px;
		}

		.all_logo_2_2 .submit {
			float: left;
			height: 40px;
			width: 100px;
			background-color: coral;
			color: white;
			border: solid 1px coral;
			border-radius: 7px 7px 0 0;
			font-size: 11px;
		}

		input {
			float: left;
			width: 520px;
			height: 38px;
			border: 1px solid #ff5330;
			outline: none;
			border-radius: 25px 0 0 25px;
			font-size: 11px;
			text-indent: 10px;
			padding: 0 20px;
		}

		.main {
			height: 100vh;
			margin-top: 100px;
		}

		.main .item {
			display: flex;
			align-items: center;
			margin: 0 20px 20px 20px;
			border: 1px solid black;
			border-radius: 10px;
			background-color: white;
			box-sizing: border-box;
		}

		.main .item img {
			width: 80px;
			height: 80px;
			margin: 0 20px;
		}
		
		.main2{
			margin-left: 200px;
			margin-top: 100px;
		}
		
		.picture{
			width: 200px;
			height: 250px;
			padding-left: 50px;
			padding-top: 20px;
			text-align: center;
			line-height: 5px;
			float: left;
		}
		
		img{
			width: 200px;
			height: 200px;
		}

		input text {
			margin-left: 30px;
		}

		a {
			color: darkmagenta;
			text-decoration: none;
		}
	</style>
</html>
